import FontAwesome from '@expo/vector-icons/FontAwesome'

import { useEffect, useCallback } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useFonts } from 'expo-font' // 导入字体库
import 'react-native-url-polyfill/auto' // 导入URL Polyfill
import { SplashScreen, Stack, useFocusEffect } from 'expo-router'
import { routes } from './routes'

SplashScreen.preventAutoHideAsync()

const RootLayout = () => {
	useFocusEffect(
		useCallback(() => {
			console.log('Hello, I am focused!')

			return () => {
				console.log('This route is now unfocused.')
			}
		}, [])
	)

	const [fontsLoaded, error] = useFonts({
		SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
		...FontAwesome.font,
	})

	useEffect(() => {
		if (error) throw error
		if (fontsLoaded) {
			SplashScreen.hideAsync()
		}
	}, [fontsLoaded, error])

	if (!fontsLoaded) {
		return null
	}

	if (!fontsLoaded && !error) {
		return null
	}

	const getRoute = () => {
		return routes.map((item, index) => {
			return <Stack.Screen name={item.name} key={index} options={{ headerShown: true, title: item.title, headerBackTitle: '返回' }}></Stack.Screen>
		})
	}

	return (
		<Stack>
			<Stack.Screen name='(auth)' options={{ headerShown: false }}></Stack.Screen>
			<Stack.Screen name='(tabs)' options={{ headerShown: false }}></Stack.Screen>
			{getRoute()}
		</Stack>
	)
}
export default RootLayout
